<template>
  <div>
    <div class="tickler_nav" :style="{background:this.isColor}">
      <div class="tickler_nav_title">记事本</div>
      <div class="tickler_nav_setting" @click="showPopup">
        <img src="../assets/fenleishezhi.png" width="30px">
      </div>
    </div>

    <van-popup 
    v-model="show" 
    position="left" 
    :overlay='over' 
    class="popup_setting">
      <button class="popup_button" @click="onClick">切换主题</button>
      <button class="popup_button">编辑数据</button>
    </van-popup>

    <van-popup v-model="isShow" position="left" :overlay='over' style="width:70%;height:80%">
      <button @click="changeColor('#00b0f0')" class="popup_button_active">#00b0f0</button>
      <button @click="changeColor('#00d1b2')" class="popup_button_active">#00d1b2</button>
      <button @click="changeColor('#f4b976')" class="popup_button_active">#f4b976</button>
      <button @click="changeColor('#f39894')" class="popup_button_active">#f39894</button>
      <button @click="changeColor('#26b6be')" class="popup_button_active">#26b6be</button>
    </van-popup>

    <div class="tickler_input">
      <input type="text" placeholder="待办事项" v-model="inpval" @keydown.enter="onAdd">
      <button @click="onAdd" :style="{background:this.isColor}">提交</button>
    </div>

    <div class="tickler_things">
      <div class="tickler_things_items" :style="{background:this.isColor}">
        <div class="tivkler_pedding_title">未完成</div>
        <div class="tivkler_pedding_icon">
          <img @click="onShow('PEDDING')" src="../assets/xiala.png" v-show="!this.isPPShow">
          <img @click="onShow('PEDDING')" src="../assets/shangla.png" v-show="this.isPPShow">
        </div>
      </div>
      <div v-show="!this.isPPShow">
        <div 
        class="pedding_items" 
        v-for="(item, index) in lists" 
        :key="index" 
        v-show="item.status == 'pedding'">
          <div class="pedding_item_left">
            <input type="checkbox" :checked="item.checked" @change="onChange(item)">
            <div class="pedding_item_name">{{item.name}}</div>
          </div>
          <div class="pedding_item_right">
            <button @click="onCancel(item)">取消</button>
          </div>
        </div>
      </div>
      
      <div class="tickler_things_items" :style="{background:this.isColor}">
        <div class="tivkler_finished_title">已完成</div>
        <div class="tivkler_finished_icon">
          <img  @click="onShow('FINISHED')" src="../assets/xiala.png" v-show="!this.isFFShow">
          <img  @click="onShow('FINISHED')" src="../assets/shangla.png" v-show="this.isFFShow">
        </div>
      </div>
      <div v-show="!this.isFFShow">
        <div 
        class="pedding_items" 
        v-for="(item, index) in lists" 
        :key="index" 
        v-show="item.status == 'finished'">
          <div class="pedding_item_left">
            <input type="checkbox" :checked="item.checked" @change="onChange(item)">
            <div class="pedding_item_name">{{item.name}}</div>
          </div>
          <div class="pedding_item_right">{{time}}</div>
        </div>
      </div>
      
      <div class="tickler_things_items" :style="{background:this.isColor}">
        <div class="tivkler_cancel_title">已取消</div>
        <div class="tivkler_cancel_icon">
          <img @click="onShow('CANCEL')" src="../assets/xiala.png" v-show="!this.isCCShow">
          <img @click="onShow('CANCEL')" src="../assets/shangla.png" v-show="this.isCCShow">
        </div>
      </div>
      <div v-show="!this.isCCShow">
        <div 
        class="pedding_items" 
        v-for="(item, index) in lists" 
        :key="index" 
        v-show="item.status == 'cancel'">
          <div class="pedding_item_left">
            <s class="pedding_item_name">{{item.name}}</s>
          </div>
          <div class="pedding_item_right">
            <button>恢复</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inpval: '',
      isPPShow: true,
      isFFShow: true,
      isCCShow: true,
      show: false,
      isShow: false,
      isColor: '#00B0F0',
      over: false
    }
  },
  computed: {
    lists: function() {
      return this.$store.state.lists
    },
    time: function() {
      var now = new Date().toLocaleDateString()
      return now
    }
  },
  methods: {
    onAdd() {
      this.$store.dispatch('getList', {
        name: this.inpval,
        checked: false,
        status: 'pedding'
      })
      this.inpval = ''
    },
    onChange(item) {
      // console.log(event.target.checked)
      this.$store.dispatch('getChecked', {
        name: item.name,
        checked: event.target.checked
      })
    },
    onCancel(item) {
      this.$store.dispatch('getCancel', item.name)
    },
    onShow(key) {
      switch(key) {
        case 'PEDDING':
          this.isPPShow = !this.isPPShow;
          break;
        case 'FINISHED':
          this.isFFShow = !this.isFFShow;
          break;
        case 'CANCEL':
          this.isCCShow = !this.isCCShow;
          break;
      }
    },
    showPopup() {
      if(this.isShow == false) {
        this.show = !this.show;
      }
      this.isShow = false;
    },
    onClick() {
      this.isShow = true;
      this.show = false;
    },
    changeColor(color) {
      this.isColor = color;
    }
  }
}
</script>

<style>
.tickler_nav {
  width: 100%;
  height: 64px;
  background-color: #00B0F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tickler_nav_title {
  width: 90%;
  text-align: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
}
.tickler_nav_setting {
  width: 10%;
  text-align: center;
}
.popup_setting {
  width: 80%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}
.popup_button {
  display: block;
  margin: 40px 80px;
  width: 80px;
  height: 35px;
  background-color: #00B0F0;
  color: #fff;
  border-radius: 5px;
  border: none;
}
.popup_button_active {
  display: block;
  margin: 40px 80px;
  width: 80px;
  height: 35px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #666;
}
.tickler_input {
  width: 100%;
  margin: 10px 0;
}
.tickler_input input {
  width: 70%;
  height: 30px;
  color: #666;
  text-indent: 5px;
  border: 1px solid #666;
  border-radius: 5px;
  outline: none;
  margin: 0 8px;
}
.tickler_input button {
  width: 20%;
  height: 35px;
  background-color: #00B0F0;
  color: #fff;
  border-radius: 5px;
  border: none;
}
.tickler_things_items {
  width: 90%;
  height: 45px;
  padding: 0 5%;
  color: #fff;
  background-color: #00B0F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1px;
}
.pedding_items {
  width: 96%;
  padding: 2%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pedding_item_left {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pedding_item_right {
  font-size: 15px;
  color: #666;
}
.pedding_item_right button {
  width: 50px;
  height: 25px;
  color: #666;
  border-radius: 5px;
  border: 1px solid #666;
}
</style>